import 'package:flutter/material.dart';

import 'ElevatedButton/node1_base.dart';
import 'ElevatedButton/node2_style.dart';

class ButtonExtendDemoPage extends StatelessWidget {
  const ButtonExtendDemoPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("按钮演示页面"),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {},
            )
          ],
        ),
        body: ListView(
          children: [
            ElevatedButtonStyleDemo(),
            Divider(),
            ElevatedButtonDemo(),
            Divider(),
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    ElevatedButton(
                      child: Text('普通按钮'),
                      onPressed: () {
                        print("普通按钮");
                      },
                    ),
                    SizedBox(width: 5),
                    ElevatedButton(
                      child: Text('颜色按钮'),
                      style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(Colors.red),
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                      ),
                      onPressed: () {
                        print("有颜色按钮");
                      },
                    ),
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    ElevatedButton(
                      child: Text('阴影按钮'),
                      style: ButtonStyle(
                        backgroundColor: MaterialStateProperty.all(Colors.blue),
                        foregroundColor:
                            MaterialStateProperty.all(Colors.white),
                        elevation: MaterialStateProperty.all(20),
                      ),
                      onPressed: () {
                        print("有阴影按钮");
                      },
                    ),
                    SizedBox(width: 5),
                    ElevatedButton.icon(
                        icon: Icon(Icons.search),
                        label: Text('图标按钮'),
                        style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all(Colors.blue),
                          foregroundColor:
                              MaterialStateProperty.all(Colors.white),
                          elevation: MaterialStateProperty.all(20),
                        ),
                        // onPressed: null,
                        onPressed: () {
                          print("图标按钮");
                        })
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 50,
                      width: 200,
                      child: ElevatedButton(
                        child: Text('宽度高度'),
                        style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all(Colors.blue),
                          foregroundColor:
                              MaterialStateProperty.all(Colors.white),
                          elevation: MaterialStateProperty.all(20),
                        ),
                        onPressed: () {
                          print("宽度高度");
                        },
                      ),
                    )
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        height: 60,
                        margin: EdgeInsets.all(10),
                        child: ElevatedButton(
                          child: Text('自适应按钮'),
                          onPressed: () {
                            print("自适应按钮");
                          },
                        ),
                      ),
                    )
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    ElevatedButton(
                        child: Text('圆角按钮'),
                        style: ButtonStyle(
                          backgroundColor:
                              MaterialStateProperty.all(Colors.blue),
                          foregroundColor:
                              MaterialStateProperty.all(Colors.white),
                          elevation: MaterialStateProperty.all(20),
                          shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(10)),
                          ),
                        ),
                        onPressed: () {
                          print("圆角按钮");
                        }),
                    Container(
                      height: 80,
                      child: ElevatedButton(
                          child: Text('圆形按钮'),
                          style: ButtonStyle(
                              backgroundColor:
                                  MaterialStateProperty.all(Colors.blue),
                              foregroundColor:
                                  MaterialStateProperty.all(Colors.white),
                              elevation: MaterialStateProperty.all(20),
                              shape: MaterialStateProperty.all(CircleBorder(
                                  side: BorderSide(color: Colors.white)))),
                          onPressed: () {
                            print("圆形按钮");
                          }),
                    ),
                    TextButton(
                      child: Text("按钮"),
                      onPressed: () {
                        print('FlatButton');
                      },
                    ),
                    SizedBox(width: 10),
                    OutlinedButton(
                        child: Text("按钮"),
                        //  color: Colors.red,  //没有效果
                        //  textColor: Colors.yellow,
                        onPressed: () {
                          print('FlatButton');
                        })
                  ],
                ),
                SizedBox(height: 10),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      child: Container(
                        margin: EdgeInsets.all(20),
                        height: 50,
                        child: OutlinedButton(
                            style: ButtonStyle(
                              side: MaterialStateProperty.all(
                                  BorderSide(width: 1, color: Colors.red)), //边框
                            ),
                            child: Text("注册"),
                            onPressed: () {}),
                      ),
                    )
                  ],
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: <Widget>[
                    ButtonBar(
                      children: <Widget>[
                        ElevatedButton(
                          child: Text('登录'),
                          onPressed: () {
                            print("宽度高度");
                          },
                        ),
                        ElevatedButton(
                          child: Text('注册'),
                          onPressed: () {
                            print("宽度高度");
                          },
                        ),
                        MyButton(
                            text: "自定义按钮",
                            height: 60.0,
                            width: 100.0,
                            pressed: () {
                              print('自定义按钮');
                            })
                      ],
                    )
                  ],
                ),
                Row(
                  children: [
                    Text(('测试')),
                    ElevatedButton(
                      onPressed: () {},
                      child: Text('Enabled'),
                      style: ButtonStyle(),
                    )
                  ],
                )
              ],
            )
          ],
        ));
  }
}

//自定义按钮组件

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final width;
  final height;
  const MyButton(
      {this.text = '', this.pressed = null, this.width = 80, this.height = 30});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: ElevatedButton(
        child: Text(this.text),
        onPressed: this.pressed,
      ),
    );
  }
}
